import React,{Component} from 'react';
import {Form, Table, Button, Divider} from 'antd'
import { reqMenu } from "../../../api/menu";

class Menu extends Component{
    state = {
        dataList: [],
        listLoading: false
    }
    initColumns = () => {
        this.columns = [
            {
                title: '名称',
                dataIndex: 'name',
                align: 'center',
                key: '1',
            },
            {
                title: '上级菜单',
                dataIndex: 'parentName',
                width: '10%',
                align: 'center',
                key: '2',
            },
            {
                title: '图标',
                dataIndex: 'icon',
                align: 'center',
                key: '3',
            },
            {
                title: '类型',
                dataIndex: 'type',
                align: 'center',
                key: '4',
                render: (type) => {
                    if (type.toString() === '0') {
                        return <Button size='small' type='primary'>目录</Button>
                    } else if(type.toString() === '1'){
                        return <Button size='small' type='primary' style={{backgroundColor:'skyblue'}}>菜单</Button>
                    } else {
                        return <Button size='small'>按钮</Button>
                    }
                }
            },
            {
                title: '排序号',
                dataIndex: 'orderNum',
                align: 'center',
                key: '5',
            },
            {
                title: '菜单url',
                dataIndex: 'url',
                align: 'center',
                key: '6',
            },
            {
                title: '授权标识',
                dataIndex: 'perms',
                align: 'center',
                key: '7',
            },
            {
                title: '操作',
                dataIndex: '',
                align: 'center',
                key: '8',
                render: () => {
                    return(
                        <span>
                            <a href="/">编辑</a>
                            <Divider type="vertical" />
                            <a href="/">删除</a>
                        </span>
                    )
                }
            },
        ];
    }
    getDataList = () => {
        this.setState({listLoading: true})
        reqMenu().then((res)=>{
            this.setState({
                dataList: res.data,
                listLoading: false
            })
        })
    }
    componentWillMount() {
        this.initColumns()
    }
    componentDidMount() {
        this.getDataList()
    }

    render(){
        const { dataList, listLoading } = this.state;
        const rowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
                console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            },
            onSelect: (record, selected, selectedRows) => {
                console.log(record, selected, selectedRows);
            },
            onSelectAll: (selected, selectedRows, changeRows) => {
                console.log(selected, selectedRows, changeRows);
            },
        };
        return(
            <div>
                <Form layout="inline">
                    <Form.Item>
                        <Button type="primary" htmlType="submit" icon="plus">
                            新增
                        </Button>
                    </Form.Item>
                </Form>
                <Table
                    columns={this.columns}
                    rowKey={record => record.menuId}
                    rowSelection={rowSelection}
                    dataSource={dataList}
                    loading={listLoading}
                    bordered>
                </Table>
            </div>
        )
    }
}
export default Menu;